<!-- ElementUI 级联选择器-->
<template>
    <el-cascader :options="ops" clearable> </el-cascader>
</template>

<script>
import axios from '../util/myaxios';
const options = {

    //页面一加载就获取数据
    async mounted() {
        const resp = await axios.get('/api/menu');
        const array = resp.data.data;

        //1.创建map集合
        const map = new Map(); //get set
        for (const { id, name, pid } of array) {
            map.set(id, { value: id, label: name, pid: pid })
        }

        //2.循环构建树

        //3.找到顶层对象
        const top = [];
        for(const obj of map.values()){
            const parent = map.get(obj.pid);
            if(parent !== undefined){
                //建立父子关系
                // if(parent.children === undefined){
                //     parent.children = [];
                // }
                parent.children ??= [];
                parent.children.push(obj);
            }else{
                top.push(obj);
            }
        }
        this.ops = top;
        console.log(top)

    },
    //数据
    data() {
        return {
            ops:[]
            // ops: [
            //     {
            //         value: 100, label: '主页', children: [
            //             {
            //                 value: 101, label: '菜单1', children: [
            //                     { value: 105, label: '子项1' },
            //                     { value: 106, label: '子项2' }
            //                 ]
            //             },
            //             {
            //                 value: 102, label: '菜单2', children: [
            //                     { value: 107, label: '子项3' },
            //                     { value: 108, label: '子项4' },
            //                     { value: 109, label: '子项5' }
            //                 ]
            //             },
            //             { value: 103, label: '菜单3' },
            //             { value: 104, label: '菜单4' }

            //         ]
            //     }
            // ]

        }
    }
}
export default options;
</script>

<style scoped></style>